<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>角色配置</title>
  <link rel="stylesheet" href="/plug-in/layui/css/layui.css" media="all">
  <style type="text/css">
  	.layui-input-block {
    	margin-left: 10px;
	}
  </style>
</head>
<body style="padding: 5px;">

<div class="toolBar">
  <div class="layui-btn-group demoTable" id="tableBtn">
	  <button class="layui-btn" data-type="01">刷新</button>
	  <button class="layui-btn" data-type="02">取消</button>
	  <button class="layui-btn" data-type="03">确认选择</button>
  </div>
</div>
<form id="configForm" lay-filter="configForm" class="layui-form"  style="display: none;" >
	<input type="hidden" name="roleId" value="" />
</form>		

<table id="dataTable" lay-filter="dataTable"/>

<!--  value中的值分别是motionId-menuId-menuParentId -->
<script type="text/html" id="motionTpl" >
    <div class="layui-input-block">
{{#  var motions = d.motionJson;if(motions){motions = motions.split(',');}else{motions=[];}   }}
{{#  layui.each(motions, function(i, item){item = item.split('$$');  }}
{{#  if(item){ }}
      <input class="menumotion" type="checkbox" menumotion="{{d.id}}_{{item[0]}}"  value="{{d.id}}_{{item[0]}}"  lay-skin="primary" name="menuMotion" title="{{item[1]}}">
{{#  } }}
{{#  }); }}
</div>
</script>
<script src="/plug-in/layui/layui.js"></script>
<script>
layui.config({ base: '/plug-in/build/'}).use(['table','layer','jquery','pForm','laytpl','form'], function(){
	var table = layui.table;
	var $ = layui.jquery;
	var pForm = layui.pForm;
	var layer = layui.layer;
	var laytpl = layui.laytpl;
	var form = layui.form;
    var roleId = pForm.rowData.id;
    
    /*按钮活动响应*/
    var active = {
	  initTable:function(){
		  table.render({
			  	id:'dataTable'
				,elem: '#dataTable'
				,even: true
				,height: 'full-68'
			  	,page : true
			  	,sort :true,skin: 'line',even: true,size: 'sm'
				,limits: [300]
				,limit: 300 //默认采用60
				,initSort: {
				    field: 'menuOrder' //排序字段，对应 cols 设定的各字段名
				    ,type: 'asc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
				}
				,url : '/console/com.fs.base.pojo.Menu/layer/list'
				,where:{
				}
			  	,cols: [[
			    	{field: 'menuName', title: '菜单名称', width: 120}
			    	,{field: 'pMenuName', title: '父菜单', width: 120}
			    	,{field: 'menuOrder', title: '排序', width: 60}
			    	,{title: '动作配置列表', width: 580,templet:'#motionTpl',align: 'left'}
			    ]]
		  		,done: function(res, curr, count){
		  			 $.getJSON("/console/role/getRoleMenuMotions", { roleId : roleId } ,function(roleMenuMotions){
			 			var roleMenuMotions = roleMenuMotions || '';
			 			roleMenuMotions = roleMenuMotions.split("#");
			 			$.each(roleMenuMotions,function(rIndex,menu_motion){
			 				if(menu_motion != ''){
			 					$("input[menumotion="+ menu_motion +"]").next().click();
			 				} 
		                }); 
			 		 });
		  		}
			});
	  },
	  reload: function(){
	    table.reload('dataTable', {
	      where: {
	      }
	    });
	  },
	  close: function(){
		  var index = parent.layer.getFrameIndex(window.name);
		  parent.layer.close(index);
	  },
	  submit: function(){
		 var param = $(".layui-form-checked").prev().serializeArray();
		 var data = { menuMotion: JSON.stringify(param),roleId:roleId } ;
		 $.getJSON('/console/role/roleMenuMotionConfig', data, function(result){
				if(result.flag){
					layer.alert('设置成功！', { icon: 1,time:1000 });
				}else{
					 layer.alert('错误：'+data.msg, { icon: 2,offset: 'rb',time:1000 });
				}
		  });
		  /*var checkStatus = table.checkStatus('dataTable');
		  var data = checkStatus.data;
		  var motionJsonArray = JSON.stringify(data);
		  var param = {
			 motionJsonArray: motionJsonArray,
			 menuId: menuId
		  };
		  $.getJSON('/console/role/roleMenuMotionConfig', param, function(result){
				if(result.flag){
					layer.alert('设置成功！', { icon: 1,time:1000 });
				}else{
					 layer.alert('错误：'+data.msg, { icon: 2,offset: 'rb',time:1000 });
				}
		  });*/
	  }
  };
  
   active.initTable();
   
   $('#tableBtn .layui-btn').on('click', function(){
	   	var $btn = $(this);
		switch ($btn.attr("data-type")) {
	  	case "01":
	  		active.reload();
		  break;
	  	case "02":
	  		active.close();
		  break;
		case "03":
	  		active.submit();
	  		break;
		default: break;
	  }
 	});
});
</script>
</body>
</html>